<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div :nth-child(1) {
            background-color: pink;
        }
        
        div :nth-child(2) {
            background-color: powderblue;
        }
        /* 这个选不到 */
        /* div span:nth-child(1) {
            background-color: rebeccapurple;
        } */
        
        div span:nth-child(2) {
            background-color: skyblue;
        }
        /* 总结：nth-child(n) 选择 父元素里面的 第 n 个孩子，他不管里面的孩子是否同一种类型 */
        /* of-type 选择指定类型的元素 */
        
        div span:first-of-type {
            background-color: powderblue;
        }
        
        div span:last-of-type {
            background-color: rosybrown;
        }
        
        div span:nth-of-type(2) {
            background-color: salmon;
        }
    </style>
</head>

<body>
    <div>
        <p>我是P标签</p>
        <span>我是span标签</span>
        <span>我是span标签</span>
        <span>我是span标签</span>
    </div>
    <!-- ul 里面我们只允许放li 所以 nth-child 和 nth-of-type 就一样了 -->
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

</html>